{% extends 'basic/component.html' %}
{% load i18n %}
{% load static %}

{% block pageTitle %}
{% trans 'Machine Learning Tasks' %}
{% endblock %}


{% block pageHeadExtra %}
    <link href="{% static 'css/mlplatform/my_tasks.css' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
{% endblock %}


{% block pageBody %}
<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-md-2">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="{% url 'storage:my_template' %}" style="font-size: 18px;"><i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;{% trans 'My datas' %}</a>
                    </li>
                    <li class="active">
                        <a href="#mytask" class="collapsed" data-toggle="collapse" data-target="#task-navbar"
                           style="background-color: #101010;font-size: 18px;"><i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;{% trans 'ML tasks' %}</a>
                        <ul id="task-navbar" class="nav nav-pills nav-stacked collapse in self-nav">
                            <li class="active"><a href="#task-all" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% trans 'all' %}</a></li>
                            <li><a href="#task-unconducted" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% trans 'unconducted' %}</a></li>
                            <li><a href="#task-running" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% trans 'running' %}</a></li>
                            <li><a href="#task-completed" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% trans 'completed' %}</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="{% url 'mlplatform:my_vrtasks' %}" style="font-size: 18px;"><i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;{% trans 'VR tasks' %}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-10">
                <div class="profile-content">
                <div class="tab-content">
                    <div id="task-all" class="tab-pane active">
                        <div class="horizontal statistic small">
                            <div class="value" id="ta-count">0</div>
                            <div class="label">{% trans 'Results' %}</div>
                            <div class="add-task text-right">
                                <span class="btn-group">
                                    <a role="button" class="btn btn-default" href="{% url 'mlplatform:index' %}">
                                        <i class="fa fa-plus"></i>{% trans 'Add New' %}
                                    </a>f
                                </span>
                            </div>
                            <div class="sort">
                                <ul class="list-inline">
                                    <li><a role="button" id="ta-time-forward" title="{% trans 'Ascending' %}"><i class="fa fa-sort-amount-asc"></i></a></li>
                                    <li><a role="button" id="ta-time-reverse" title="{% trans 'Descending' %}"><i class="fa fa-sort-amount-desc"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="ta-scope"></div>
                        <div id="ta-pagination-scope" class="text-center"></div>
                    </div>{# task-all #}
                    <div id="task-unconducted" class="tab-pane">
                        <div class="horizontal statistic small">
                            <div class="value" id="tu-count">0</div>
                            <div class="label">{% trans 'Results' %}</div>
                            <div class="add-task text-right">
                                <span class="btn-group">
                                    <a role="button" class="btn btn-default" href="{% url 'mlplatform:index' %}">
                                        <i class="fa fa-plus"></i>{% trans 'Add New' %}
                                    </a>
                                </span>
                            </div>
                            <div class="sort">
                                <ul class="list-inline">
                                    <li><a role="button" id="tu-time-forward" title="{% trans 'Ascending' %}"><i class="fa fa-sort-amount-asc"></i></a></li>
                                    <li><a role="button" id="tu-time-reverse" title="{% trans 'Descending' %}"><i class="fa fa-sort-amount-desc"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="tu-scope"></div>
                        <div id="tu-pagination-scope" class="text-center"></div>
                    </div>{# task-unconducted #}
                    <div id="task-running" class="tab-pane">
                        <div class="horizontal statistic small">
                            <div class="value" id="tr-count">0</div>
                            <div class="label">{% trans 'Results' %}</div>
                            <div class="add-task text-right">
                                <span class="btn-group">
                                    <a role="button" class="btn btn-default" href="{% url 'mlplatform:index' %}">
                                        <i class="fa fa-plus"></i>{% trans 'Add New' %}
                                    </a>
                                </span>
                            </div>
                            <div class="sort">
                                <ul class="list-inline">
                                    <li><a role="button" id="tr-time-forward" title="{% trans 'Ascending' %}"><i class="fa fa-sort-amount-asc"></i></a></li>
                                    <li><a role="button" id="tr-time-reverse" title="{% trans 'Descending' %}"><i class="fa fa-sort-amount-desc"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="tr-scope"></div>
                        <div id="tr-pagination-scope" class="text-center"></div>
                    </div>{# task-running #}
                    <div id="task-completed" class="tab-pane">
                        <div class="horizontal statistic small">
                            <div class="value" id="tc-count">0</div>
                            <div class="label">{% trans 'Results' %}</div>
                            <div class="add-task text-right">
                                <span class="btn-group">
                                    <a role="button" class="btn btn-default" href="{% url 'mlplatform:index' %}">
                                        <i class="fa fa-plus"></i>{% trans 'Add New' %}
                                    </a>
                                </span>
                            </div>
                            <div class="sort">
                                <ul class="list-inline">
                                    <li><a role="button" id="tc-time-forward" title="{% trans 'Ascending' %}"><i class="fa fa-sort-amount-asc"></i></a></li>
                                    <li><a role="button" id="tc-time-reverse" title="{% trans 'Descending' %}"><i class="fa fa-sort-amount-desc"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="tc-scope"></div>
                        <div id="tc-pagination-scope" class="text-center"></div>
                    </div>{# task-completed #}
                </div>{# tab-content #}
                </div>{# profile-content #}
            </div>{# col-9 #}
        </div>{# content row #}
    </div>{# content #}

</div>{# container #}
{% endblock %}


{% block pageFootExtra %}
    <script src="{% static 'js/mlplatform/my_tasks.js' %}"></script>
    <script src="{% static 'js/vendor/bootstrap-paginator.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.min.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.bootstrap.min.js' %}"></script>
    <link href="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.js"></script>
{% endblock %}
